<template>
  <van-tabbar
    v-model="active"
    safe-area-inset-bottom
    :inactive-color="appStore.tabBar.color"
    :active-color="appStore.tabBar.selectedColor"
    @change="handleTabBarChange"
  >
    <van-tabbar-item
      v-for="item of tabBars"
      :key="item.pagePath"
      :name="item.pagePath"
    >
      <span class="weight">{{ item.text }}</span>
      <template #icon="props">
        <img
          :src="`${props.active ? item.selectedIconPath : item.iconPath}`"
        >
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script lang="ts" setup name="AppFooter">
import { computed } from 'vue';

import { useRoute, useRouter } from 'vue-router';

import { useAppStore } from '@/store/app';
import { useUserStore } from '@/store/user';

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const appStore = useAppStore();
const active = computed(() => route.path);
const tabBars = computed(() => userStore.tabBars);
const handleTabBarChange = (path: string) => {
  router.replace(path);
};
</script>

<style lang="scss" scoped>
  .weight {
    font-weight: 500;
  }
</style>
